@include('vendor.ueditor.assets')
<link rel="stylesheet" href="{{ admin_asset("vue/elementui/theme-chalk/index.css") }}">

<style>
    .edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon {
        background-image: url("https://static.135editor.com/img/icons/editor-135-icon.png") !important;
        background-size: 85%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .custom_form-item, .el-form-item__content {
        line-height: 0 !important;
    }

    .mb__10 {
        margin-bottom: 10px !important;
    }

    .block__form {
        margin-bottom: 20px;
        border-bottom: 1px dashed #ccc;
    }

    .line__form__item {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        /*height: 178px;*/
        display: block;
    }
</style>

<div id="from_config_app">
    <el-card class="box-card">
        <el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
            <el-form-item prop="mini_type" label="小程序"
                          :rules="[{ required: true, message: '请选择小程序', trigger: 'blur'}]" class="mb__10">
                <el-select v-model="form.mini_type" placeholder="小程序">
                    @foreach($miniType as $k => $v)
                        <el-option label="{{ $v }}" value="{{ $k }}"></el-option>
                    @endforeach
                </el-select>
            </el-form-item>
            <el-form-item prop="name" label="名称" :rules="[{ required: true, message: '请输入名称', trigger: 'blur'}]">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item prop="content" label="内容" class="custom_form-item">
                {{--                <el-input type="textarea" :autosize="{ minRows: 15}" id="ueditor" class="ueditor"></el-input>--}}
                <textarea class="text/plain" id="ueditor"
                          class="ueditor"> {!! isset($info) ? $info->content : '' !!} </textarea>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                    class="avatar-uploader"
                    action="{{ url('api/images') }}"
                    name="files"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="form.img" :src="form.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item prop="status" label="状态"
                          :rules="[{ required: true, message: '请选择状态', trigger: 'blur'}]">
                <el-radio v-model="form.status" label="0">禁用</el-radio>
                <el-radio v-model="form.status" label="1">正常</el-radio>
            </el-form-item>

            <el-form-item label="表单配置">
                <div v-for="(item,index) in form.config" class="block__form">
                    <el-form-item label="标题名称" :rules="[{ required: true, message: '请输入标题名称', trigger: 'blur'}]"
                                  class="mb__10">
                        <el-input v-model="item.label"></el-input>
                    </el-form-item>
                    <el-form-item label="是否必填" :rules="[{ required: true, message: '请选择是否必填', trigger: 'blur'}]"
                                  class="mb__10">
                        <el-radio v-model="item.is_required" label="0">否</el-radio>
                        <el-radio v-model="item.is_required" label="1">是</el-radio>
                    </el-form-item>
                    <el-form-item label="类型" :rules="[{ required: true, message: '请选择类型', trigger: 'blur'}]"
                                  class="mb__10">
                        <el-select v-model="item.type" placeholder="类型">
                            <el-option label="单行文本" value="text"></el-option>
                            <el-option label="多行文本" value="textarea"></el-option>
                            <el-option label="下拉框" value="select"></el-option>
                            <el-option label="单选框" value="radio"></el-option>
                            <el-option label="多选框" value="checkbox"></el-option>
                            <el-option label="日期选择器" value="date"></el-option>
                            <el-option label="日期范围选择器" value="date_range"></el-option>
                            <el-option label="图片上传" value="img"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="item.type=='text'" label="字数限制" class="mb__10">
                        <el-input-number v-model="item.text_limit" :min="0" :max="10000"></el-input-number>
                    </el-form-item>
                    <el-form-item v-if="item.type=='textarea'" label="字数限制" class="mb__10">
                        <el-input-number v-model="item.textarea_limit" :min="0" :max="10000"></el-input-number>
                    </el-form-item>
                    <el-form-item v-if="item.type=='textarea'" label="行数" class="mb__10">
                        <el-input-number v-model="item.rows" :min="1" :max="10000"></el-input-number>
                    </el-form-item>
                    <el-form-item v-if="item.type=='img'" label="可上传数量" class="mb__10">
                        <el-input-number v-model="item.upload_num" :min="1" :max="10000"></el-input-number>
                    </el-form-item>
                    <el-form-item v-if="item.type=='select' || item.type=='radio' || item.type=='checkbox'" label="选项"
                                  class="mb__10">
                        <div v-for="(v,i) in item.options" class="line__form__item">
                            <el-input v-model="v.key" placeholder="请输入选项值"></el-input>
                            <el-input v-model="v.value" placeholder="请输入选项名"></el-input>
                            <el-button type="text" @click="delOptions(index, i)">删除</el-button>
                        </div>
                        <el-button type="text" @click="addOptions(index)">添加</el-button>
                    </el-form-item>
                    <el-button type="text" @click="delConfig(index)">删除</el-button>
                    <el-button type="text" @click="moveUpConfig(index)">上移</el-button>
                    <el-button type="text" @click="moveDownConfig(index)">下移</el-button>
                </div>
                <el-button type="text" @click="addConfig">添加</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
            </el-form-item>
        </el-form>
    </el-card>


</div>


<script src="{{ admin_asset('vue/vue.min.js')}}"></script>
<script src="{{ admin_asset('vue/elementui/index.js')}}"></script>
<script src="{{ admin_asset('vendor/ueditor/plugins/135editor.js')}}"></script>

<script type="text/javascript">

    Dcat.ready(function () {
        window.UEDITOR_CONFIG.serverUrl = '/api/imagesU'
        //解决第二次进入加载不出来的问题
        UE.delEditor('ueditor');
        // 默认id是ueditor
        var ue = UE.getEditor('ueditor', {
            // 自定义工具栏
            toolbars: [
                [
                    'anchor', //锚点
                    'undo', //撤销
                    'redo', //重做
                    'bold', //加粗
                    'indent', //首行缩进
                    'snapscreen', //截图
                    'italic', //斜体
                    'underline', //下划线
                    'strikethrough', //删除线
                    'subscript', //下标
                    'fontborder', //字符边框
                    'superscript', //上标
                    'formatmatch', //格式刷
                    'source', //源代码
                    'blockquote', //引用
                    'pasteplain', //纯文本粘贴模式
                    'selectall', //全选
                    'print', //打印
                    'preview', //预览
                    'horizontal', //分隔线
                    'removeformat', //清除格式
                    'time', //时间
                    'date', //日期
                    'unlink', //取消链接
                    'insertrow', //前插入行
                    'insertcol', //前插入列
                    'mergeright', //右合并单元格
                    'mergedown', //下合并单元格
                    'deleterow', //删除行
                    'deletecol', //删除列
                    'splittorows', //拆分成行
                    'splittocols', //拆分成列
                    'splittocells', //完全拆分单元格
                    'deletecaption', //删除表格标题
                    'inserttitle', //插入标题
                    'mergecells', //合并多个单元格
                    'deletetable', //删除表格
                    'cleardoc', //清空文档
                    'insertparagraphbeforetable', //"表格前插入行"
                    'insertcode', //代码语言
                    'fontfamily', //字体
                    'fontsize', //字号
                    'paragraph', //段落格式
                    'simpleupload', //单图上传
                    'insertimage', //多图上传
                    'edittable', //表格属性
                    'edittd', //单元格属性
                    'link', //超链接
                    'emotion', //表情
                    'spechars', //特殊字符
                    'searchreplace', //查询替换
                    'map', //Baidu地图
                    'gmap', //Google地图
                    'insertvideo', //视频
                    'help', //帮助
                    'justifyleft', //居左对齐
                    'justifyright', //居右对齐
                    'justifycenter', //居中对齐
                    'justifyjustify', //两端对齐
                    'forecolor', //字体颜色
                    'backcolor', //背景色
                    'insertorderedlist', //有序列表
                    'insertunorderedlist', //无序列表
                    'fullscreen', //全屏
                    'directionalityltr', //从左向右输入
                    'directionalityrtl', //从右向左输入
                    'rowspacingtop', //段前距
                    'rowspacingbottom', //段后距
                    'pagebreak', //分页
                    'insertframe', //插入Iframe
                    'imagenone', //默认
                    'imageleft', //左浮动
                    'imageright', //右浮动
                    'attachment', //附件
                    'imagecenter', //居中
                    'wordimage', //图片转存
                    'lineheight', //行间距
                    'edittip ', //编辑提示
                    'customstyle', //自定义标题
                    'autotypeset', //自动排版
                    'webapp', //百度应用
                    'touppercase', //字母大写
                    'tolowercase', //字母小写
                    'background', //背景
                    'template', //模板
                    'scrawl', //涂鸦
                    'music', //音乐
                    'inserttable', //插入表格
                    'drafts', // 从草稿箱加载
                    'charts', // 图表
                    '135editor', // 135编辑器
                ]
            ],
            elementPathEnabled: false,
            enableContextMenu: false,
            autoClearEmptyNode: true,
            catchRemotelmageEnable: true,
            wordCount: false,
            imagePopup: false,
            initialFrameHeight: 400,
            autotypeset: {indent: true, imageBlockLine: 'center'}
        });
        ue.ready(function () {
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
        });

        var app = new Vue({
            el: "#from_config_app",
            data() {
                return {
                    form: {
                        id: '',
                        content: '',
                        mini_type: '',
                        name: '',
                        img: '',
                        status: '1',
                        config: [],
                    },
                }
            },
            created() {
                @if(isset($info) && $info)
                    this.form.id = "{{ $info->id }}"
                this.form.content = "{{ $info->content }}"
                this.form.mini_type = "{{ $info->mini_type }}"
                this.form.name = "{{ $info->name }}"
                this.form.img = "{{ $info->img }}"
                this.form.status = "{{ $info->status }}"
                this.form.config = {!! ($info->config) !!}
                    @endif
            },
            methods: {
                handleAvatarSuccess(res, file) {
                    this.form.img = res.data.img_path;
                },
                beforeAvatarUpload(file) {
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isLt2M;
                },
                addConfig() {
                    this.form.config.push({
                        label: '',
                        type: '',
                        is_required: '1',
                        text_limit: 100,
                        textarea_limit: 255,
                        rows: 3,
                        upload_num: 1,
                        options: []
                    })
                },
                delConfig(index) {
                    this.form.config.splice(index, 1)
                },
                moveUpConfig(index) {
                    if (index === 0) {
                        Dcat.error('当前已是最上面,无法上移')
                    } else {
                        const arr = this.form.config
                        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
                    }
                },
                moveDownConfig(index) {
                    if (index === this.form.config.length - 1) {
                        Dcat.error('当前已是最下面,无法下移', null)
                    } else {
                        const arr = this.form.config
                        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
                    }
                },
                addOptions(index) {
                    this.form.config[index].options.push({
                        key: '', value: '',
                    })
                },
                delOptions(index, i) {
                    this.form.config[index].options.splice(i, 1)
                },
                submitForm(formName) {
                    this.form.content = ue.getContent()
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            $.ajax({
                                url: "{{ admin_route('diy_form.store') }}",
                                type: 'POST',
                                dataType: 'JSON',
                                data: {
                                    id: this.form.id,
                                    content: this.form.content,
                                    mini_type: this.form.mini_type,
                                    name: this.form.name,
                                    img: this.form.img,
                                    status: this.form.status,
                                    config: this.form.config,
                                    _token: '{{ csrf_token() }}',
                                },
                                success: function (res) {
                                    Dcat.loading(false);
                                    if (!res.status) {
                                        Dcat.error(res.msg);
                                    } else {
                                        Dcat.success(res.msg);
                                        Dcat.reload("{{ admin_route('diy_form.index') }}")
                                    }
                                }
                            });
                        } else {
                            return false;
                        }
                    })
                },
            }
        })
    });

</script>
